<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
	<style type="text/css">
		body {
			background: #F5F5F5;
		}

		header {
			position: fixed;
			top: 0;
			z-index: 1000;
			width: 100%;
			height: 5rem;
			background: #36D9D6;
			display: flex;
			justify-content: center;
			align-items: center;
			align-content: space-between;
		}

		.back {
			height: 2rem;
			width: 2rem;
			background: url(../../image/back.png) no-repeat;
			background-size: auto 1.6rem;
		}

		.title {
			height: 5rem;
			width: calc(100% - 6rem);
			line-height: 5rem;
			font-size: 1.8rem;
			text-align: center;
			color: #FFFFFF;
		}

		#content {
			width: 100%;
			position: relative;
			top: 6rem;
		}

		.travelList {
			width: 100%;
		}

		.travelList>li {
			margin-bottom: 1rem;
			position: relative;
		}

		.scenery {
			width: 100%;
			height: 18rem;
			position: relative;
			top: 0;
			left: 0;
		}

		.sceneryInfo {
			height: 5rem;
			width: 100%;
			position: absolute;
			bottom: 0.5rem;
			left: 0;
			z-index: 1;
			text-indent: 1rem;
			color: #FFFFFF;
		}

		.senceryBox {
			height: 3rem;
			line-height: 3rem;
			font-size: 2rem;
			letter-spacing: 0.2rem;
		}

		.sceneryAddress {
			height: 2rem;
			line-height: 2rem;
			font-size: 1.6rem;
			background: url(../../image/pos_1.png)1rem center no-repeat;
			background-size: auto 1rem;
			text-indent: 3rem;
		}
	</style>
</head>

<body>
	<!--顶部标题栏-->
	<!--页面标题-->
	<header>
		<div class="back"></div>
		<div class="title">兼职旅行</div>
	</header>
	<div id="content">
		<!--风景列表-->
		<ul class="travelList">

		</ul>
	</div>
	<script src="../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../lib/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			$(".back").click(function () {
				window.open("index.html", "_self");
			})


			var jsonData = Fun.getJson("travel.json");

			//数据加载
			function dataAdd(index, num) {
				for (var i = index; i < num; i++) {
					var html = '<li index="' + i + '"><img src="' + jsonData[i].travelImg + '" class="scenery"/>' +
						'<div class="sceneryInfo"><p class="senceryBox">' +
						'<span class="sceneryName">' + jsonData[i].sceneryName + '</span>|<span class="sceneryText">' + jsonData[i].sceneryText + '</span></p>' +
						'<p class="sceneryAddress"><span>' + jsonData[i].sceneryAddress + '</span>&nbsp;&nbsp;<span class="time">' + jsonData[i].sendTime + '</span></p></div></li>';
					$(".travelList").append(html);
					$(".travelList >li").click(function () {
						window.open("travelInfo.html?index=" + $(this).index(), "_self");
					})
					if (jsonData[i + 1] == undefined) {
						return;
					}
				}
			}
			dataAdd(0, 5);
			var dataNum = 0;
			$(window).scroll(function () {
				if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
					dataNum++;
					if (dataNum < Math.ceil(jsonData.length / 5)) {

						layer.msg("数据加载中...", {
							icon: 16,
							time: 1000,
							shade: [0.8, '#393D49']
						});
						setTimeout(function () {
							dataAdd(dataNum * 5, (dataNum + 1) * 5);
						}, 1500)

					} else {
						layer.msg("我也是有底线的", {
							icon: 5,
							time: 1500,
							shade: [0.8, '#393D49']
						});
					}
				}
			})

		})
	</script>
</body>

</html>